<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>资源规划</title>
	<meta name="description" content="方案规划软件">
	<!-- Bootstrap CSS -->
	<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<!-- 字体CSS -->
	<link href="assets/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
	<!-- 自定义样式 -->
	<link href="assets/css/style.css" rel="stylesheet" type="text/css" />

	<link rel="stylesheet" href="./assets/layui/css/layui.css">
	<link rel="stylesheet" href="./assets/layui/css/formSelects-v4.css">
	<link rel="stylesheet" href="./assets/layui/css/style.css">
	<style>
		.content-page{
			margin-top: 50px;
		}
		.plan-box-left{

			margin-right: 20px;
		}
		.plan-box{
			margin:15px;

		}
		.plan-box-left,.plan-box-right{
			background: #fff;
			min-height: 600px;
			padding:15px;
		}
		.plan-block .layui-form-label{
			width: 100px;
		}
		#step_demo{
			background: #fff;
			margin: 15px;
			padding: 15px;
		}
		#step_demo .step-header li .step-line{
			position: relative;
			display: block;
			border-top: 2px solid #0095ec;
			width: 120px;
			top: 10px;
			left: 0px;
		}
		#step_demo .step-header li .step-name{
			left: -6px;
			top: 30px;
		}
		#step_demo .step-header li{
			height: 60px;
		}
		.plan-submit{
			text-align: center;
			margin:15px;
		}
	</style>
</head>

<body class="adminbody">
<div id="main">
	<!-- 头部导航 -->
	<div class="headerbar">
		<!-- LOGO -->
		<div class="headerbar-left">
			<a href="index.html" class="logo">
				<!--					<img alt="Logo" src="assets/images/logo.png" />-->
				<span>方案规划软件</span>
			</a>
		</div>

		<nav class="navbar-custom">
			<ul class="list-inline float-right mb-0">
				<li class="list-inline-item dropdown notif">
					<a class="nav-link dropdown-toggle arrow-none" data-toggle="dropdown" href="#" role="button"
					   aria-haspopup="false" aria-expanded="false">
						<i class="fa fa-fw fa-bell-o"></i><span class="notif-bullet"></span>
					</a>
					<div class="dropdown-menu dropdown-menu-right dropdown-arrow dropdown-lg">
						<!-- item-->
						<div class="dropdown-item noti-title">
							<h5><small><span class="label label-danger pull-xs-right">1</span>消息提醒</small></h5>
						</div>
						<!-- item-->
						<a href="#" class="dropdown-item notify-item">
							<div class="notify-icon bg-faded">
								<img src="assets/images/avatar.jpg" alt="img"
									 class="rounded-circle img-fluid">
							</div>
							<p class="notify-details">
								<b>Admin</b>
								<span>用户信息注册成功</span>
								<small class="text-muted">3分钟前</small>
							</p>
						</a>
						<!-- All-->
						<a href="#" class="dropdown-item notify-item notify-all">
							查看所有消息
						</a>

					</div>
				</li>

				<li class="list-inline-item dropdown notif">
					<a class="nav-link dropdown-toggle nav-user" data-toggle="dropdown" href="#" role="button"
					   aria-haspopup="false" aria-expanded="false">
						<img src="assets/images/avatar.jpg" alt="Profile image" class="avatar-rounded">
					</a>
					<div class="dropdown-menu dropdown-menu-right profile-dropdown ">
						<!-- item-->
						<div class="dropdown-item noti-title">
							<h5 class="text-overflow"><small>Hello, admin</small> </h5>
						</div>

						<!-- item-->
						<a href="pro-profile.html" class="dropdown-item notify-item">
							<i class="fa fa-user"></i> <span>个人中心</span>
						</a>

						<!-- item-->
						<a href="#" class="dropdown-item notify-item">
							<i class="fa fa-power-off"></i> <span>退出</span>
						</a>
					</div>
				</li>

			</ul>

			<ul class="list-inline menu-left mb-0">
				<li class="float-left">
					<button class="button-menu-mobile open-left">
						<i class="fa fa-fw fa-bars"></i>
					</button>
				</li>
			</ul>

		</nav>

	</div>
	<!-- 头部导航End -->
	<!-- 左侧导航开始 start-->
	<div class="left main-sidebar">
		<div>
			<!--				<img src="./assets/images/logo.png" alt="">-->
		</div>
		<div class="sidebar-inner leftscroll">
			<div id="sidebar-menu">
				<ul>
					<li class="submenu">
						<a href="index.html"><i class="fa fa-fw fa-home"></i><span>方案规划首页</span> </a>
					</li>
					<li class="submenu">
						<a href="schemePlan.html" class="active"><i class="fa fa-fw fa-check-circle-o"></i><span>资源规划</span> </a>
					</li>
					<li class="submenu">
						<a href="schemeDesign.html"><i class="fa fa-fw fa-pencil-square-o"></i><span>方案设计</span> </a>
					</li>
					<li class="submenu">
						<a href="schemeSource.html"><i class="fa fa-fw fa-bars"></i><span>资源管理</span> </a>
					</li>

				</ul>
				<div class="clearfix"></div>
			</div>
			<div class="clearfix"></div>

		</div>

	</div>
	<!-- End 左侧导航 -->
	<div class="content-page">
		<div class="plan-main">
			<div class="plan-content">
				<div class="plan-progress">
					<div id="step_demo" class="step-body">
						<div class="step-header" style="width:80%;overflow: hidden;">
							<ul>
								<li>
									<span class="step-line"></span>
									<span class="step-name">填写申请表</span>
								</li>
								<li>
									<span class="step-name">上传资料</span>
								</li>
								<li>
									<span class="step-name">待确认</span>
								</li>
								<li>
									<span class="step-name">已确认</span>
								</li>
								<li>
									<span class="step-name">待受理</span>
								</li>
								<li>
									<span class="step-name">已受理</span>
								</li>
								<li>
									<span class="step-name">预约完成</span>
								</li>
								<li>
									<span class="step-name">签证单已发放</span>
								</li>
							</ul>
						</div>
						<div class="step-content">
							<div class="step-list">填写申请表</div>
							<div class="step-list">上传资料</div>
							<div class="step-list">待确认</div>
							<div class="step-list">已确认</div>
							<div class="step-list">待受理</div>
							<div class="step-list">已受理</div>
							<div class="step-list">预约完成</div>
							<div class="step-list">签证单已发放</div>
							<div class="step-list">完成</div>
						</div>

					</div>

					<!--<button id="preBtn">上一步</button>-->
					<!--<button id="nextBtn">下一步</button>-->
					<!--<button id="goBtn">跳转的指定的步骤</button>-->
				</div>
				<div class="plan-box">
					<div class="layui-row">
						<div class="layui-col-xs4">
							<div class="plan-box-left">
								<form class="layui-form" action="">
									<div class="plan-block">
										<div class="plan-progress-item">
											<p>1、制定人员 <i class=" layui-icon layui-icon-close-fill"></i></p>
										</div>
										<div class="layui-form-item">
											<label class="layui-form-label">管理人员</label>
											<div class="layui-input-block">
												<select  lay-verify="required" xm-select="manage" xm-select-search-type="dl" xm-select-search=""
														 xm-select-show-count="3" id="manage" >
													<option value="">请选择管理人员</option>
													<option value="1">layer</option>
													<option value="2">form</option>
													<option value="3">layim</option>
													<option value="4">element</option>
													<option value="5">laytpl</option>
													<option value="6">upload</option>
													<option value="7">laydate</option>
													<option value="8">laypage</option>
													<option value="9">flow</option>
												</select>
											</div>
										</div>

										<div class="layui-form-item">
											<label class="layui-form-label">技术人员</label>
											<div class="layui-input-block">
												<select  lay-verify="required" xm-select="skill" xm-select-search-type="dl" xm-select-search=""
														 xm-select-show-count="3" id="skill">
													<option value="">请选择技术人员</option>
													<option value="1">layer</option>
													<option value="2">form</option>
													<option value="3">layim</option>
													<option value="4">element</option>
													<option value="5">laytpl</option>
													<option value="6">upload</option>
													<option value="7">laydate</option>
													<option value="8">laypage</option>
													<option value="9">flow</option>
												</select>
											</div>
										</div>
									</div>

									<div class="plan-block">
										<div class="plan-progress-item">
											<p>2、设定场景 <i class=" layui-icon layui-icon-close-fill"></i></p>
										</div>
										<div class="layui-form-item">
											<label class="layui-form-label">选择时间</label>
											<div class="layui-input-block">
												<input type="text" class="layui-input" id="test1" placeholder="请选择时间" id="time">
											</div>
										</div>

										<div class="layui-form-item">
											<div class="layui-inline">
												<label class="layui-form-label">选择场地</label>
												<div class="layui-input-block">
													<select name="interest" lay-filter="place" id="place" onchange="selectPlace(this)">
														<option value=""></option>
														<option value="0">写作</option>
														<option value="1">阅读</option>
														<option value="2">游戏</option>
														<option value="3">音乐</option>
														<option value="4">旅行</option>
													</select>
												</div>
											</div>
											<div class="layui-inline" style="margin: -14px 0 0 0; width: 80px;height: 38px;line-height: 38px;border: 1px solid #D2D2D2;
												 border-radius: 3px;" id="siteSize">
											</div>
										</div>

										<div class="layui-form-item">
											<label class="layui-form-label">试验要素</label>
											<div class="layui-input-block">
												<button class="layui-btn" style="width: 100%;" onclick="selectElement()" type="button">请选择</button>
											</div>
										</div>
									</div>

									<div class="plan-block">
										<div class="plan-progress-item">
											<p>3、试验种类 <i class=" layui-icon layui-icon-close-fill"></i></p>
										</div>
										<div class="layui-form-item">
											<label class="layui-form-label">实际试验</label>
											<div class="layui-input-block">
												<input type="text" name="reality" lay-verify="required|pass|number"   placeholder="请输入次数"  class="layui-input" id="actual">
											</div>
										</div>

										<div class="layui-form-item">
											<label class="layui-form-label">仿真试验</label>
											<div class="layui-input-block">
												<input type="text" name="emulate" lay-verify="required|number"  placeholder="请输入次数"  class="layui-input" id="emulate">
											</div>
										</div>
									</div>
								</form>
							</div>
						</div>

						<div class="layui-col-xs8">
							<div class="plan-box-right">
								<div class="plan-val-block">
									<div class="layui-card">
										<div class="layui-card-header">制定人员</div>
										<div class="layui-card-body" >
											<div class="layui-row" id="manageBlock">
												<div class="layui-col-xs1">
													管理人员：
												</div>
												<div class="layui-col-xs11">
													<p ></p>
												</div>
											</div>

											<div class="layui-row" id="skillBlock">
												<div class="layui-col-xs1">
													技术人员：
												</div>
												<div class="layui-col-xs11">
													<p ></p>
												</div>
											</div>
										</div>
									</div>
								</div>

								<div class="plan-val-block">
									<div class="layui-card">
										<div class="layui-card-header">设定场景</div>
										<div class="layui-card-body" >
											<div class="layui-row" id="timeBlock">
												<div class="layui-col-xs2">

												</div>
												<div class="layui-col-xs10">
													<p >dfs d</p>
												</div>
											</div>

											<div class="layui-row" id="placeBlock">
												<div class="layui-col-xs2">

												</div>
												<div class="layui-col-xs10">
													<p >dfs d</p>
												</div>
											</div>

											<div class="layui-row" id="factorBlock">
												<div class="layui-col-xs2">

												</div>
												<div class="layui-col-xs10">
													<p >dfs d</p>
												</div>
											</div>
										</div>
									</div>
								</div>

								<div class="plan-val-block">
									<div class="layui-card">
										<div class="layui-card-header">制定人员</div>
										<div class="layui-card-body" >
											<div class="layui-row" id="emulateBlock">
												<div class="layui-col-xs2">

												</div>
												<div class="layui-col-xs10">
													<p >dfs d</p>
												</div>
											</div>

											<div class="layui-row" id="actualBlock">
												<div class="layui-col-xs2">

												</div>
												<div class="layui-col-xs10">
													<p >dfs d</p>
												</div>
											</div>
										</div>
									</div>
								</div>

								<div class="plan-submit">
									<button class="layui-btn" onclick="infoCommit()">提交</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="assets/js/modernizr.min.js"></script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/moment.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-select/bootstrap-select.js"></script>


<script src="assets/js/detect.js"></script>
<script src="assets/js/fastclick.js"></script>
<script src="assets/js/jquery.blockUI.js"></script>
<script src="assets/js/jquery.nicescroll.js"></script>

<!-- App js -->
<script src="./assets/layui/layui.js" charset="utf-8"></script>
<script src="./assets/layui/formSelects-v4.min.js" charset="utf-8"></script>
<script src="./assets/layui/steps.js" charset="utf-8"></script>
<script>
	var formArr=['manage','skill','actual','time','place','emulate'];
	var layer,formSelects,steps;
	var $step= $("#step_demo").step();
	layui.use(['form', 'layedit', 'laydate','layer','formSelects','steps'], function(){
		layer=layui.layer;
		formSelects = layui.formSelects;
		steps = layui.steps;
		var form = layui.form
		var laydate=layui.laydate;


		//选择日期
		laydate.render({
			elem: '#test1',
			done: function(value, date){
				console.log(value); //得到日期生成的值，如：2017-08-18
				$('#timeBlock p').empty().text(value);
			}
		});
		//步骤
		// var $step= $("#step_demo").step();

		$("#preBtn").click(function(event) {
			$step.preStep();//上一步
		});
		$("#nextBtn").click(function(event) {
			$step.nextStep();//下一步
		});
		$("#goBtn").click(function(event) {
			$step.goStep(3);//到指定步
		});
		var manageArr=[],skillArr=[];
		formSelects.on('manage', function(id, vals, val, isAdd, isDisabled){
			// console.log(id, vals, val, isAdd, isDisabled)
			var arr=selectData(isAdd,val,manageArr)
			$('#manageBlock p').empty().text(arr.join(' '));
			checkComplete('manageBlock','skillBlock','',2)
		});

		formSelects.on('skill', function(id, vals, val, isAdd, isDisabled){
			// console.log(id, vals, val, isAdd, isDisabled)
			//id:           点击select的id
			//vals:         当前select已选中的值
			//val:          当前select点击的值
			//isAdd:        当前操作选中or取消
			//isDisabled:   当前选项是否是disabled

			//如果return false, 那么将取消本次操作
			// return false;
			var arr=selectData(isAdd,val,skillArr)
			$('#skillBlock p').empty().text(arr.join(' '));
			checkComplete('manageBlock','skillBlock','',2)
		});
	//	选择场地
		form.on('select(place)', function(data){
			var val=data.value;//选中的值
			var text=$(`#place option[value=${data.value}]`).text();//选中的name
			$('#placeBlock p').empty().text(text)
			console.log(text)
		});
	})
	//多选数据,返回选中值
	function selectData(isAdd,val,arr) {
		var arrName=[];
		if (isAdd){
			arr.push(val);
		}else {
			for (let i=0;i<arr.length;i++){
				if (arr[i].value == val.value){
					arr.splice(i,1)
				}
			}
		}
		for (let k of arr){
			arrName.push(k.name)
		}
		return arrName;
	}
	//查询
	function checkComplete(a,b,c,num) {
		var aEle=$(`#${a} p`).text();
		var bEle=$(`#${b} p`).text();
		var cEle=c?$(`#${c} p`).text():true;
		var $step= $("#step_demo").step();
		// console.log(a,b,c,num)
		if (aEle&&bEle&&cEle){
			$step.goStep(num);
		}else {
			$step.goStep(num-1);
		}
	}
	//选择要素
	function selectElement() {
		var treeData= [
				{
					title: '江西'
					,id: 1
					,children: [{
						title: '南昌'
						,id: 1000
						,children: [{
							title: '青山湖区'
							,id: 10001
						},{
							title: '高新区'
							,id: 10002
						}]
					},{
						title: '九江'
						,id: 1001
					},{
						title: '赣州'
						,id: 1002
					}]
				},{
					title: '广西'
					,id: 2
					,children: [{
						title: '南宁'
						,id: 2000
					},{
						title: '桂林'
						,id: 2001
					}]
				},{
					title: '陕西'
					,id: 3
					,children: [{
						title: '西安'
						,id: 3000
					},{
						title: '延安'
						,id: 3001
					}]
				}];

		layer.open({
			 area: ['800px', '600px']
			,title: false
			,shade: 0.4 //遮罩透明度
			,maxmin: false //允许全屏最小化
			,anim: 1 //0-6的动画形式，-1不开启
			,btnAlign:'c'
			,btn:['确认']
			,content:`
					<div class="tree-content">
						<div class="tree-box">
							<div id="treeEle" class="demo-tree demo-tree-box"></div>
						</div>
					</div>
				`
			,success: function(layer, index){
				layui.use('tree',function () {
					var tree = layui.tree
							,layer = layui.layer
							,util = layui.util;
					//常规用法
					tree.render({
						elem: '#treeEle' //默认是点击节点可进行收缩
						,data: treeData
					});
				})
			}
			,yes: function(index, layero){
				console.log('确认')
				layer.close(index)
			}
			,cancel: function(){

			}
		});
	}

	function getInfo() {

		$.ajax({
			//请求方式
			type : "POST",
			//请求的媒体类型
			contentType: "application/x-www-form-urlencoded",//application/x-www-form-urlencoded,application/json
			//请求地址
			url : "/bs/standardManage/insertStandard",
			//数据，json字符串
			data:data,
			//请求成功
			success : function(res) {
				if (res.status==0){
					layer.msg('提交成功！');
				}else {
					layer.msg('提交失败！');
				}
			},
			//请求失败，包含具体的错误信息
			error : function(e){
				console.error(e.status);
				console.error(e.responseText);
			}
		});
	}

	var val=$('#manage').val();
//	步骤跳转
	function jumpStep() {
		// this.find(".jump-steps").on('click',function () {
		//   var step_id = $(this).attr("data-step");
		//   steps.goStep(step_id);
		// });
		var $step= $("#step_demo").step();
		steps.goStep(4);
	}

//信息提交
	function infoCommit () {

	}
//	实际试验次数
	$('#actual').change(function (e) {
		var val=e.target.value;
		var passVal=parseInt(val);
		if (!isNaN(val)){
			$('#actualBlock p').empty().text(passVal);
		}else {
			layer.msg('请输入数字！');
			$('#actualBlock p').empty()
		}

	})

	//	仿真试验次数
	$('#emulate').change(function (e) {
		var val=e.target.value;
		var passVal=parseInt(val);
		if (!isNaN(val)){
			$('#emulateBlock p').empty().text(passVal);
		}else {
			layer.msg('请输入数字！');
			$('#emulateBlock p').empty()
		}

	})
</script>
</body>

</html>